<template>
	<view class="user-header" style="width: 180upx;">
		<view class="user-rz-container">
			<view class="user-rz" :style="{ backgroundImage: 'url(' + avatar + ')' }">
			</view>
			<image v-if="lvrz==1" class="user-rz-icon" :src="rzImg" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
import {
	localStorage
} from '../../js_sdk/mp-storage/mp-storage/index.js'
import darkModeMixin from '@/utils/darkModeMixin.js'
export default {
	mixins: [darkModeMixin],
    props: {
        avatar: {
		  type: String,
		  default: ''
		},
		lvrz: {
		  type: Number,
		  default: 0
		}
		
    },
	watch: {
	    lvrz(newVal) {
	      console.log('lvrz updated to: ', newVal);
	    }
	  },
	name: "avatarItem",
	data() {
		return {
			AvatarItem:"",
			userinfo:null,
			rzImg: this.$API.SPRz(),
		};
	},
	mounted() {
		const that = this;
		if (localStorage.getItem('userinfo')) {
			
			that.userinfo = JSON.parse(localStorage.getItem('userinfo'));
		} else {
			that.userinfo = null;
		}
		
		
	},
	methods: {
		
		
	}
}
</script>

<style>
	.text-content {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 10;
		-webkit-box-orient: vertical;
	}
	
	.text-shojo2 {
		color: #ff6c3e;
	}
	
	.user-info-data {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.xyy {
		margin-left: 0px;
	}
	
	.search-type {
		display: flex;
		position: relative;
		align-items: center;
		justify-content: space-around;
		border-bottom: solid 4upx #f3f3f3;
	}
	
	.search-type-box.active {
		border-bottom: solid 4upx #000000;
		color: #000000;
	}
	
	.user-info-data-box {
		flex-grow: 1;
		text-align: center;
	}
	
	.user-data-num {
		margin-right: 0px;
		font-size: 36upx;
	}
	
	.user-data-label {
		font-size: 28upx;
	}
	
	.sup-script {
		font-size: 28upx;
		font-weight: 400;
	}
	.user-rz-container image{
		background-color: initial!important;
		border: initial!important;
	}
	
	.cu-bar .action2 {
		background: #00000057;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		/* text-align: center; */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.grid2 {
		display: flex;
		flex-direction: row;
		justify-content: normal;
	}
	
	.cu-bar2 {
		margin-top: 10upx;
	}
	
	.userIndex .header .action {
		font-size: 36upx;
	}
	
	.user-rz-container {
		width: 200upx;
		height: 200upx;
		position: relative;
		display: inline-block;
	}
	
	.user-rz {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		border: 3px solid white;
		overflow: hidden;
	}
	
	.user-rz-icon {
		position: absolute;
		right: -5upx;
		bottom: -5upx;
		width: 60upx;
		height: 60upx;
		z-index: 10;
		border-radius: 50%;
		background-color: white;
		padding: 2upx;
		box-sizing: border-box;
	}
	
	/*  #ifdef MP || APP-PLUS */
	.user-header image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
	
	/*  #endif */
	.user-info-main {
		/*  #ifdef H5 || APP-PLUS */
		height: 480rpx;
		/*  #endif */
		/*  #ifdef MP */
		height: 450rpx;
		/*  #endif */
	}
	
	.tn-margin-top-xxl {
		margin-top: 60upx;
	}
	
	.center-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>